<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*1.世界佳缘 用户名显示隐藏内容*/
        .login{
            width: 300px;
            height: 25px;
            margin: 100px auto;
        }
        .login .input1,.input2{
            width: 135px;
            color: #999999;
        }
    </style>
</head>
<body>
    <!--1.世界佳缘 用户名显示隐藏内容-->
<!--    <div class="login">-->
<!--        <input type="text" class="input1" placeholder="邮箱/ID/手机号">-->
<!--        <input type="password" class="input2" placeholder="密码">-->
<!--    </div>-->

    <script>
        var input1 = document.querySelector('.input1');
        var input2 = document.querySelector('.input2');
        input1.onfocus = function () {
            if (this.placeholder === '邮箱/ID/手机号'){
                this.placeholder = '';
            }
            this.style.color = '#999';
        }
        input1.onblur = function () {
            if (this.placeholder === ''){
                this.placeholder = '邮箱/ID/手机号';
            }
            this.style.color = 'black';
        }
        input2.onfocus = function () {
            if (this.placeholder === '密码'){
                this.placeholder = '';
            }
            this.style.color = '#999';
        }
        input2.onblur = function () {
            if (this.placeholder === ''){
                this.placeholder = '密码';
            }
            this.style.color = 'black';
        }
    </script>
</body>
</html>